import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Chart, Tooltip, Axis, Legend, Bar, Interval } from 'viser-react';
import { formatName, forIdCard } from '../../utils/utils';
import CreditDetail from './creditDetail';
import { router } from 'umi'
const DataSet = require('@antv/data-set');

import {
    Steps,
    Card,
    Spin,
    Divider,
    Table,
    Avatar,
    Button,
    Form,
    Modal,
    Input,
    Select,
    Popconfirm,
    Radio,
    Checkbox,
    InputNumber,
    DatePicker,
    Drawer,
    Timeline,
    Popover,
    Icon,
    message,
    Row,
    Col
} from 'antd';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import statusConfig from '@/config/status_list.js';
// import statusConfig from '@/config/status.config';
import styles from './BasicList.less';

const { Step } = Steps;
const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

const refundStatusList = {
    0: '待用户退货',
    1: '待商家收货',
    2: '待商家退款',
    3: '退款成功',
    4: '退款拒绝关闭',
    5: '退款关闭',
    6: '待商家同意申请'
};

const userOrderListStatus = {
    2: '损坏',
    3: '丢失',
    4: '其它',
}
//退款订单详情
// 创建时间、退款编号、商品信息、实付金额、实退金额、退款状态
const refundColumns = [
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
    },
    {
        title: '退款编号',
        dataIndex: 'refundNumber',
        key: 'refundNumber',
        align: 'center',
        render: text => <a href={`/refund/refundList?id=${text}`} target="_blank">{text}</a>
    },
    {
        title: '商品信息',
        dataIndex: 'goodsInfo',
        key: 'goodsInfo',
        align: 'center',
    },
    {
        title: '实付金额',
        dataIndex: 'applyAmount',
        key: 'applyAmount',
        align: 'center',
    },
    {
        title: '实退金额',
        dataIndex: 'realRefundAmount',
        key: 'realRefundAmount',
        align: 'center',
    },
    {
        title: '退款状态',
        dataIndex: 'refundStatus',
        key: 'status',
        align: 'center',
        render: text => <span>{refundStatusList[text]}</span>
    },
];

function statusFormat(status) {
    const statusValues = {
        WAITING_PAYMENT: 1,
        WAITING_BUSINESS_DELIVERY: 2,
        WAITING_USER_RECEIVE_CONFIRM: 3,
        WAITING_GIVE_BACK: 4,
        WAITING_SETTLEMENT: 5,
        WAITING_SETTLEMENT_PAYMENT: 5,
    };
    return statusValues[status] || 6;
}
function expressType(type) {
    const types = ['快递'];
    return types[type];
}
const formatStr = 'YYYY-MM-DD hh:mm:ss';
const CreateDeliverForm = Form.create()(props => {
    const {
        modalVisible,
        form,
        deliverOptions,
        handleModalVisible,
        handleDeliver,
        modalStyle,
        remark,
        reportDetal,
        detailInfo
    } = props;

    const okHandle = () => {
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            handleDeliver(fieldsValue);
            form.resetFields();
        });
    };
    const {
        base_info,
        court_risk_info_list,
        hit_risk_taggin,
        multiple_score,
        personal_loan_demand,
        personal_loan_f,
        personal_loan_s,
        personal_overdue_history,
        queryReportTime,
        relevance_risk_check,
        reportNo,
        risk_list_check,
        score_norm_explain,
        verify_recomment,
        riskLevelData,
        riskGoInfo,
        riskGo,
        loading,
        totalPay,
    } = reportDetal;
    const typesObj = {
        deliver: '快速发货',
        remark: '新增备注',
        settle: '结算',
        card: '身份信息',
    };
    // 申请

    const sourceData1 = [
        {
            name: '近12个月申请机构总数',
            近1个月: personal_loan_s && personal_loan_s.apply_time1,
            近3个月: personal_loan_s && personal_loan_s.apply_time3,
            近6个月: personal_loan_s && personal_loan_s.apply_time6,
            近12个月: personal_loan_s && personal_loan_s.apply_time12,
        },
        {
            name: '消费分期类申请机构数',
            近12个月: personal_loan_s && personal_loan_s.consumer_apply_mechanism_number,
        },
        {
            name: '机构贷款类申请机构数',
            近12个月: personal_loan_s && personal_loan_s.network_loan_apply_mechanis_mnumber,
        },
    ];

    // 放款

    const sourceData2 = [
        {
            name: '近12个月放款机构总数',
            近1个月: personal_loan_f && personal_loan_f.lend_number1,
            近3个月: personal_loan_f && personal_loan_f.lend_number3,
            近6个月: personal_loan_f && personal_loan_f.lend_number6,
            近12个月: personal_loan_f && personal_loan_f.lenders,
        },
        {
            name: '消费分期类放款机构数',
            近12个月: personal_loan_f && personal_loan_f.cflenders,
            // '近12个月': 81,
        },
        {
            name: '机构贷款类放款机构数',
            近12个月: personal_loan_f && personal_loan_f.nllenders,
            // '近12个月': 61,
        },
    ];

    // 逾期
    const sourceData3 = [
        {
            name: '近6个月逾期机构总数',
            近6个月逾期机构总数:
                personal_overdue_history && personal_overdue_history.overdue_mechanism_number,
        },
        {
            name: '进6个月逾期总次数',
            进6个月逾期总次数: personal_overdue_history && personal_overdue_history.overdue_total_counts,
        },
        {
            name: '近6个月未结算逾期次数',
            进6个月逾期总次数: personal_overdue_history && personal_overdue_history.uncleared_counts,
        },
        {
            name: '近6个月逾期总金额(元)',
            近6个月逾期总金额: personal_overdue_history && personal_overdue_history.overdue_total_money,
        },
    ];

    // 关联风险监测
    const sourceData4 = [
        {
            name: '3个月身份证手机号次数',
            '3个月身份证手机号次数': relevance_risk_check && relevance_risk_check.ident_to_phone_counts,
        },
        {
            name: '3个月手机号关联身份证次数',
            '3个月手机号关联身份证次数':
                relevance_risk_check && relevance_risk_check.phone_to_ident_counts,
        },
    ];

    // 贷款需求
    const sourceData5 = [
        {
            name: 'p2p平台',
            近7天:
                personal_loan_demand &&
                personal_loan_demand.wx_datad7 &&
                personal_loan_demand.wx_datad7.p2p_platform,
            近30天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam1 &&
                personal_loan_demand.wx_datam1.p2p_platform,
            近90天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam3 &&
                personal_loan_demand.wx_datam3.p2p_platform,
        },
        {
            name: '信用卡',
            近7天:
                personal_loan_demand &&
                personal_loan_demand.wx_datad7 &&
                personal_loan_demand.wx_datad7.credit_card,
            近30天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam1 &&
                personal_loan_demand.wx_datam1.credit_card,
            近90天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam3 &&
                personal_loan_demand.wx_datam3.credit_card,
        },
        {
            name: '消费分期平台',
            近7天:
                personal_loan_demand &&
                personal_loan_demand.wx_datad7 &&
                personal_loan_demand.wx_datad7.common_amortize_platform,
            近30天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam1 &&
                personal_loan_demand.wx_datam1.common_amortize_platform,
            近90天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam3 &&
                personal_loan_demand.wx_datam3.common_amortize_platform,
        },
        {
            name: '消费金融公司',
            近7天:
                personal_loan_demand &&
                personal_loan_demand.wx_datad7 &&
                personal_loan_demand.wx_datad7.large_finance_platform,
            近30天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam1 &&
                personal_loan_demand.wx_datam1.large_finance_platform,
            近90天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam3 &&
                personal_loan_demand.wx_datam3.large_finance_platform,
        },
        {
            name: '其他平台',
            近7天:
                personal_loan_demand &&
                personal_loan_demand.wx_datad7 &&
                personal_loan_demand.wx_datad7.other_platform,
            近30天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam1 &&
                personal_loan_demand.wx_datam1.other_platform,
            近90天:
                personal_loan_demand &&
                personal_loan_demand.wx_datam3 &&
                personal_loan_demand.wx_datam3.other_platform,
        },
    ];
    const dv1 = new DataSet.View().source(sourceData1);
    const dv2 = new DataSet.View().source(sourceData2);
    const dv3 = new DataSet.View().source(sourceData3);
    const dv4 = new DataSet.View().source(sourceData4);
    const dv5 = new DataSet.View().source(sourceData5);
    dv1.transform({
        type: 'fold',
        fields: ['近1个月', '近3个月', '近6个月', '近12个月'],
        key: '月份',
        value: '月均降雨量',
    });
    dv2.transform({
        type: 'fold',
        fields: ['近1个月', '近3个月', '近6个月', '近12个月'],
        key: '月份',
        value: '月均降雨量',
    });
    dv3.transform({
        type: 'fold',
        fields: [
            '近6个月逾期机构总数',
            '进6个月逾期总次数',
            '近6个月未结算逾期次数',
            '近6个月逾期总金额',
        ],
        key: '月份',
        value: '月均降雨量',
    });
    dv4.transform({
        type: 'fold',
        fields: ['3个月身份证手机号次数', '3个月手机号关联身份证次数'],
        key: '月份',
        value: '月均降雨量',
    });
    dv5.transform({
        type: 'fold',
        fields: ['近7天', '近30天', '近90天'],
        key: '月份',
        value: '月均降雨量',
    });
    const data1 = dv1.rows;
    const data2 = dv2.rows;
    const data3 = dv3.rows;
    const data4 = dv4.rows;
    const data5 = dv5.rows;

    let score_Text = null;
    if (multiple_score >= 0 && multiple_score <= 50) {
        score_Text = '低风险';
    } else if (multiple_score >= 51 && multiple_score <= 80) {
        score_Text = '中风险';
    } else {
        score_Text = '高风险';
    }
    let proposal = null;
    if (multiple_score >= 0 && multiple_score <= 30) {
        proposal = '建议通过';
    } else if (multiple_score >= 30 && multiple_score <= 50) {
        proposal = '建议通过';
    } else if (multiple_score >= 50 && multiple_score <= 60) {
        proposal = '手机建议审核后通过,其他建议通过';
    } else if (multiple_score >= 60 && multiple_score <= 70) {
        proposal = '手机建议审核后通过,其他建议通过';
    } else if (multiple_score >= 70 && multiple_score <= 80) {
        proposal = '手机,数码等高价值商品审核后预收租金，其他建议通过';
    } else if (multiple_score >= 80 && multiple_score <= 90) {
        proposal = '手机，数码等高价值商品建议拒绝，其他建议通过';
    } else {
        proposal = '建议拒绝';
    }
    const grid12 = {
        width: '11.9%',
        textAlign: 'center',
    };
    const grid14 = {
        width: '14.28%',
        textAlign: 'center',
    };
    const grid16 = {
        width: '16.66%',
        textAlign: 'center',
    };
    const gridStyle = {
        width: '20%',
        textAlign: 'center',
    };
    const grid25 = {
        width: '25%',
        textAlign: 'center',
    };
    const grid30 = {
        width: '33.3%',
        textAlign: 'center',
    };
    const grid40 = {
        width: '40%',
        textAlign: 'center',
    };
    const grid50 = {
        width: '50%',
        textAlign: 'center',
    };
    const grid60 = {
        width: '60%',
        textAlign: 'center',
    };
    
    return (
        <div>
            {modalStyle === 'deliver' && (
                <Modal
                    destroyOnClose
                    title={modalStyle === 'deliver' ? '快速发货' : '新增备注'}
                    visible={modalVisible}
                    onOk={okHandle}
                    width="450px"
                    onCancel={() => handleModalVisible()}
                >
                    <div>
                        <FormItem>
                            {form.getFieldDecorator(
                                'expressId',
                                {}
                            )(
                                <Select style={{ width: '100%' }} placeholder="请选择物流公司">
                                    {deliverOptions.map(option => {
                                        return (
                                            <Option key={option.id} value={option.id}>
                                                {option.name}
                                            </Option>
                                        );
                                    })}
                                </Select>
                            )}
                        </FormItem>
                        <FormItem>
                            {form.getFieldDecorator('expressNo', {})(<Input placeholder="请输入物流单号" />)}
                        </FormItem>
                    </div>
                </Modal>
            )}
            {modalStyle === 'remark' && (
                <Modal
                    destroyOnClose
                    title={typesObj[modalStyle]}
                    visible={modalVisible}
                    onOk={okHandle}
                    width="450px"
                    onCancel={() => handleModalVisible()}
                >
                    <FormItem>
                        {form.getFieldDecorator('remark', {
                            initialValue: remark,
                        })(<TextArea rows={4} placeholder="请输入备注信息" />)}
                    </FormItem>
                </Modal>
            )}
            {modalStyle === 'reportResult' && (
                <Modal
                    destroyOnClose
                    title={typesObj[modalStyle]}
                    visible={modalVisible}
                    onOk={okHandle}
                    width="1200px"
                    onCancel={() => handleModalVisible()}
                    footer={null}
                >
                    <CreditDetail
                        userOrders={detailInfo.userOrders}
                        creditInfo={props.reportDetal}
                    ></CreditDetail>
                </Modal>
            )}
        </div>
    );
});
import { getParam } from '@/utils/utils';
/* eslint-disable no-script-url */
@connect(({ detail, loading }) => ({
    ...detail,
    loading: loading.models.detail,
}))
@Form.create()
class BasicList extends PureComponent {
    state = {
        // radioValue: 'good',
        // checkValue: false,
        // damageVal: 0, // 损坏
        remark: '',
        drawerVisible: false,
        drawerType: 'deliver',
        drawerData: [],
        confirmSettlementVisible: false,
        confirmSettlementInfo: {},
        notedata: [
            { name: 'baicha' },
            { name: 'baicha' }
        ]
    };
    onRequestDetail = () => {
        const { dispatch, match } = this.props;
        const { params } = match;
        dispatch({
            type: 'detail/queryOrderDetail',
            payload: {
                id: getParam('id'),
            },
        });
        dispatch({
            type: 'detail/getDetailinformation',
            payload: {
                id: getParam('id'),
            },
        });
    }
    componentDidMount() {
        this.onRequestDetail();
    }

    setDispatch(modalStyle) {
        const { dispatch } = this.props;
        dispatch({
            type: 'detail/save',
            payload: {
                modalVisible: true,
                modalStyle,
            },
        });
    }

    deliverGoods = (type, val) => {
        const { dispatch } = this.props;
        if (type === 'reportResult') {
            dispatch({
                type: 'detail/generateReportByOrderId',
                payload: {
                    orderId: val.orderId,
                    uid: val.uid,
                },
                callback: res => {
                    if (!res.data) {
                        message.error('暂无信用数据')
                    } else {
                        this.setDispatch(type);
                    }
                },
            });
        } else {
            this.setDispatch(type);
            dispatch({
                type: 'detail/queryDeliverOps',
            });
        }
    };

    handleModalVisible = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'detail/save',
            payload: {
                modalVisible: false,
            },
        });
    };

    handleDeliver = params => {
        const { dispatch, match, modalStyle } = this.props;
        if (modalStyle === 'remark') {
            dispatch({
                type: 'detail/pushRemark',
                payload: {
                    orderId: match.params.id,
                    remark: params.remark
                },
                callback: () => {
                    this.onRequestDetail();
                }
            })
        }
        else {
            dispatch({
                type: 'detail/sendDeliver',
                payload: {
                    ...params,
                    orderId: match.params.id,
                },
            });
        }
    };

    addRemark = (type, remark) => {
        this.setState({ remark });
        this.setDispatch(type);
    };

    confirm = () => {
        const { dispatch, match } = this.props;
        dispatch({
            type: 'detail/closeOrder',
            payload: {
                orderId: match.params.id,
            },
        });
    };

    onRadioChange = e => {
        const { dispatch, checkValue } = this.props;
        dispatch({
            type: 'detail/save',
            payload: {
                radioValue: e.target.value,
                checkValue: e.target.value === 'good' ? false : checkValue,
            },
        });
    };

    onCheckChange = e => {
        const { dispatch, radioValue } = this.props;
        dispatch({
            type: 'detail/save',
            payload: {
                checkValue: e.target.checked,
                radioValue: e.target.checked && radioValue === 'good' ? 'other' : radioValue,
            },
        });
    };

    damageValue = val => {
        const { dispatch } = this.props;
        dispatch({
            type: 'detail/save',
            payload: {
                damageVal: val,
            },
        });
    };

    handleSubmit = e => {
        e.preventDefault();
        const { form, dispatch, match, detailInfo, newDetailInfo, checkValue, damageVal, radioValue } = this.props;
        const statusFormatObj = {
            good: 1,
            damage: 2,
            lose: 3,
            other: 4,
        };
        const status = statusFormatObj[radioValue];
        let listStatus = [];
        if (status) {
            listStatus = [status];
        }

        form.validateFields((err, values) => {
            if (!err) {
                let { end, start } = values;
                start = start && moment(start).format('YYYY-MM-DD 00:00:00');
                end = end && moment(end).format(formatStr);
                if (status === 4) {
                    const payload = {
                        orderId: match.params.id,
                        originalOrderId: newDetailInfo.userOrders.originalOrderId
                            ? newDetailInfo.userOrders.originalOrderId
                            : match.params.id,
                        losePrice: status === 3 ? damageVal : 0,
                        listStatus,
                        damagePrice: status === 2 ? damageVal : 0,
                        userViolationRecords: {
                            start: moment(start).format('YYYY-MM-DD 00:00:00'),
                            end: moment(end).format('YYYY-MM-DD 00:00:00'),
                            type: 1,
                            reason: values.reason,
                            amount: values.amount,
                            userOrderCashId: newDetailInfo.userOrderCashes.id,
                        },
                    };
                    if (newDetailInfo.userViolationRecords[0] && newDetailInfo.userViolationRecords[0].id) {
                        payload.userViolationRecords.id = newDetailInfo.userViolationRecords[0].id;
                    }
                    this.setState({
                        confirmSettlementVisible: true,
                        confirmSettlementInfo: payload
                    })
                    // dispatch({
                    //   type: 'detail/settleOrder',
                    //   payload,
                    // });
                } else {
                    const payload = {
                        orderId: match.params.id,
                        originalOrderId: newDetailInfo.userOrders.originalOrderId
                            ? newDetailInfo.userOrders.originalOrderId
                            : match.params.id,
                        losePrice: status === 3 ? damageVal : 0,
                        listStatus,
                        damagePrice: status === 2 ? damageVal : 0,
                    };
                    this.setState({
                        confirmSettlementVisible: true,
                        confirmSettlementInfo: payload
                    })
                    // dispatch({
                    //   type: 'detail/settleOrder',
                    //   payload,
                    // });
                }
            }
        });
    };

    showDrawer = (drawerType, data) => {
        if (!data) {
            message.error('暂无物流进度');
            return;
        }
        const { result } = data;
        const list = result.list.reverse();
        this.setState({
            drawerType,
            drawerData: list,
            drawerVisible: true,
        });
    };

    onClose = () => {
        this.setState({
            drawerVisible: false,
        });
    };

    confirmSettlement = () => {
        //
        this.props.dispatch({
            type: 'detail/settleOrder',
            payload: this.state.confirmSettlementInfo,
            callback: res => {
                if (res.code) {
                    this.setState({
                        confirmSettlementVisible: false
                    })
                }
            }
        })
    }

    render() {
        const {
            detailInfo,
            loading,
            modalVisible,
            deliverOptions,
            modalStyle,
            form,
            radioValue,
            checkValue,
            damageVal,
            reportDetal,
            newDetailInfo,
        } = this.props;
        const { remark, drawerType, drawerVisible, drawerData, confirmSettlementInfo, notedata } = this.state;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const {
            userOrderCashes,
            orderByStagesList,
            userOrders,
            product,
            userViolationRecords,
            shopAdditionalList,
            refundOrder,
            refundOrderList,
            userOrderSettlement,//结算单详情
            businessRemark,
            opeRemark,
            buyOutOrderLists
        } = newDetailInfo;
        //
        const productColumns = [
            {
                title: '宝贝',
                dataIndex: 'product',
                key: 'product',
                render: (text, record) => {
                    return (
                        <div className={styles.product}>
                            {record.images && <Avatar shape="square" size={64} src={record.images[0].src} />}
                            <div className={styles.product_desc}>
                                <div className={styles.product_name}>{record.productName}</div>
                            </div>
                        </div>
                    );
                },
            },
            {
                title: '宝贝属性',
                dataIndex: 'skuTitle',
                key: 'skuTitle',
            },
            {
                title: '单价',
                dataIndex: 'rentPrice',
                key: 'rentPrice',
            },
            {
                title: '数量',
                dataIndex: 'nums',
                key: 'nums',
            },
        ];
        const rentColumns = [
            {
                title: '租用天数',
                dataIndex: 'rentDayNum',
                key: 'rentDayNum',
            },
            {
                title: '起租时间',
                dataIndex: 'rentStart',
                key: 'rentStart',
            },
            {
                title: '归还时间',
                dataIndex: 'rentEnd',
                key: 'rentEnd',
            },
        ];
        const rentInfoColumns = [
            {
                title: '单价',
                dataIndex: 'rentPrice',
                key: 'rentPrice',
            },
            {
                title: '天数',
                dataIndex: 'rentDuration',
                key: 'rentDuration',
            },
            {
                title: '数量',
                dataIndex: 'nums',
                key: 'nums',
            },
            {
                title: '平台优惠',
                dataIndex: 'platformCouponReduction',
                key: 'platformCouponReduction',
            },
            {
                title: '店铺优惠',
                dataIndex: 'couponReduction',
                key: 'couponReduction',
            },
            {
                title: '增值服务费',
                dataIndex: 'additionalServicesPrice',
                key: 'additionalServicesPrice',
                render: (text, record) => {
                    const content = (
                        <div className={styles.content}>
                            {record.shopAdditionalList &&
                                record.shopAdditionalList.map(item => (
                                    <div key={item.id}>
                                        <div>{item.name}</div>
                                        <div>{item.content}</div>
                                    </div>
                                ))}
                        </div>
                    );
                    return (
                        <div>
                            <span style={{ marginRight: '12px' }}>{record.additionalServicesPrice}</span>
                            <Popover trigger="click" content={content}>
                                <Icon type="question-circle" />
                            </Popover>
                        </div>
                    );
                },
            },
            {
                title: '运费',
                dataIndex: 'freightPrice',
                key: 'freightPrice',
            },
            {
                title: '应收总租金',
                dataIndex: 'totalRent',
                key: 'totalRent',
            },
        ];
        const depositColumns = [
            {
                title: '总押金',
                dataIndex: 'totalDeposit',
                key: 'totalDeposit',
            },
            {
                title: '信用减免',
                dataIndex: 'deposit',
                key: 'deposit',
            },
            {
                title: '实付押金',
                dataIndex: 'realDeposit',
                key: 'realDeposit',
            },
        ];
        const periodsColumns = [
            {
                title: '总期数',
                dataIndex: 'totalPeriods',
                key: 'totalPeriods',
            },
            {
                title: '当前期数',
                dataIndex: 'currentPeriods',
                key: 'currentPeriods',
            },
            {
                title: '租金',
                dataIndex: 'currentPeriodsRent',
                key: 'currentPeriodsRent',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                render: (text, record) => {
                    const types = [
                        '',
                        '待支付',
                        '已支付',
                        '逾期已支付',
                        '逾期待支付',
                        '已取消',
                        '已结算',
                        '已退款',
                    ];
                    return <div>{types[record.status]}</div>;
                },
            },
            {
                title: '账单到期时间',
                dataIndex: 'statementDate',
                key: 'statementDate',
            },
        ];
        //买断订单
        const buyoutColums = [
            {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                align: 'center',
            },
            {
                title: '订单编号',
                dataIndex: 'orderId',
                align: 'center',
                key: 'orderId',
                render: (orderId) => {
                    return <a onClick={() => router.push(`/list/buyout/detail?id=${orderId}`)}>{orderId}</a>
                }
            },
            {
                title: '商品信息',
                dataIndex: 'productName',
                width: 200,
                align: 'center',
                key: 'productName',
            },
            {
                title: '销售价',
                dataIndex: 'realSalePrice',
                align: 'center',
                key: 'realSalePrice',
            },
            {
                title: '已付租金',
                dataIndex: 'paidRent',
                align: 'center',
                key: 'paidRent',
            },
            {
                title: '买断尾款',
                dataIndex: 'endFund',
                align: 'center',
                key: 'endFund',
            },
        ];
        // 结算单详情
        const violationColumns = [
            {
                title: '结算单状态',
                dataIndex: 'paymentStatus',
                key: 'paymentStatus',
                render: text => <span>{text ? '已支付' : '待支付'}</span>
            },
            {
                title: '结算类型',
                dataIndex: 'type',
                key: 'type',
                render: text => <span>{userOrderListStatus[text]}</span>
            },
            {
                title: '结算单金额',
                dataIndex: 'amount',
                key: 'amount',
            },
            {
                title: '原因',
                dataIndex: 'reason',
                key: 'reason',
                render: text => <span>{text ? text : '暂无'}</span>
            },
        ];
        const productData = userOrderCashes
            ? [
                {
                    rowKey: 'productData',
                    images: product.images,
                    productName: product.productName,
                    skuTitle: product.skuTitle,
                    rentPrice: userOrderCashes.rent,
                    nums: userOrders.nums,
                },
            ]
            : [];
        const rentData = userOrderCashes
            ? [
                {
                    rowKey: 'rentData',
                    rentDayNum: userOrders.rentDuration,
                    rentStart: userOrders.rentStart,
                    rentEnd: userOrders.unrentTime,
                },
            ]
            : [];
        const rentInfoData = userOrderCashes
            ? [
                {
                    rowKey: 'rentInfoData',
                    rentPrice: userOrderCashes.rent,
                    rentDuration: userOrders.rentDuration,
                    nums: userOrders.nums,
                    platformCouponReduction: userOrderCashes.platformCouponReduction,
                    couponReduction: userOrderCashes.couponReduction,
                    freightPrice: userOrderCashes.freightPrice,
                    totalRent: userOrderCashes.totalRent,
                    additionalServicesPrice: userOrderCashes.additionalServicesPrice,
                    shopAdditionalList,
                },
            ]
            : [];
        const depositData = userOrderCashes
            ? [
                {
                    rowKey: 'depositData',
                    depositReduction: userOrders.from === 5 ? 0 : userOrderCashes.depositReduction,
                    deposit:
                        userOrders.from === 5
                            ? userOrderCashes.depositReduction
                            : userOrderCashes.creditAmount,
                    totalDeposit: userOrderCashes.totalDeposit,
                    realDeposit:
                        userOrders.from === 5 ? userOrderCashes.deposit : userOrderCashes.fundAmount,
                },
            ]
            : [];
        const periodsData = orderByStagesList || [];
        const violationData = [
            {
                id: 0,
                paymentStatus: userOrderSettlement && userOrderSettlement.paymentStatus,
                type: userOrderSettlement && userOrderSettlement.type,
                amount: userOrderSettlement && userOrderSettlement.amount,
                reason: userOrderSettlement && userOrderSettlement.reason
            }
        ]
        const parentProps = {
            modalVisible,
            deliverOptions,
            modalStyle,
            handleModalVisible: this.handleModalVisible,
            handleDeliver: this.handleDeliver,
            remark,
            reportDetal,
            detailInfo
        };
        //退款订单详情
        const refundOrderData = [];
        refundOrderList && refundOrderList.map(item => {
            refundOrderData.push({
                createTime: item.createTime,
                refundNumber: item.refundNumber,
                goodsInfo: product && product.productName + '/' + product.skuTitle,
                applyAmount: item.applyAmount,
                realRefundAmount: item.realRefundAmount,
                refundStatus: item.refundStatus
            })
        })

        const confirmSettlementStatus = {
            1: '完好',
            2: '损坏',
            3: '丢失',
            4: '其它',
        }
        return (
            <PageHeaderWrapper back title="订单详情">
                <Spin spinning={loading} delay={100}>
                    {newDetailInfo.userOrders && (
                        <div>
                            <Steps progressDot current={statusFormat(newDetailInfo.userOrders.status)}>
                                <Step description="买家下单" />
                                <Step description="买家付款" />
                                <Step description="商家发货" />
                                <Step description="买家租用" />
                                <Step description="归还与结算" />
                                <Step description="订单完成" />
                            </Steps>
                            <Card style={{ marginTop: '20px', background: '#fff6e8', borderColor: '#f5a623' }}>
                                <h3>
                                    当前订单状态：
                  <span>
                                        {newDetailInfo.userOrders.type === 2 && <span>续租</span>}
                                        {newDetailInfo.userOrders.type === 3 && <span>买断</span>}
                                    </span>
                                    {statusConfig[newDetailInfo.userOrders.status]}
                                    {newDetailInfo.userOrders.status == 'WAITING_BUSINESS_DELIVERY' && newDetailInfo.userOrders.examineStatus == 1 && <span>（用户申请关单）</span>}
                                </h3>
                                {/* {newDetailInfo.userOrders.shopRemark && (
                  <Card>备注: {newDetailInfo.userOrders.shopRemark}</Card>
                )} */}
                                <div style={{ marginTop: '15px' }}>
                                    {newDetailInfo.userOrders.status === 'WAITING_BUSINESS_DELIVERY' && (
                                        <Button
                                            onClick={() => this.deliverGoods('deliver')}
                                            type="primary"
                                            style={{ marginRight: '20px' }}
                                        >
                                            发货
                                        </Button>
                                    )}
                                    {/* <Button
                                        onClick={() => this.addRemark('remark', newDetailInfo.userOrders.shopRemark)}
                                        type="primary"
                                    >新增备注 </Button> */}
                                    {newDetailInfo.userOrders.status === 'WAITING_PAYMENT' && (
                                        <Popconfirm title="确定关闭订单吗?" onConfirm={() => this.confirm()}>
                                            <a style={{ color: '#999', marginLeft: '20px' }} href="javascript:;">
                                                关闭订单
                      </a>
                                        </Popconfirm>
                                    )}
                                </div>
                            </Card>
                            <Card style={{ marginTop: '20px' }} type="inner" title="订单信息">
                                {/* <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '12px' }}>XX平台备注</div>
                                {
                                    opeRemark.map((item, index) => {
                                        return (
                                            <DescriptionList key={index} size="small" style={{ marginBottom: 16 }}>
                                                <Description term="备注人">{item.userName}</Description>
                                                <Description term="备注内容">{item.remark}</Description>
                                                <Description term="备注时间"> {item.createTime} </Description>
                                            </DescriptionList>
                                        )
                                    })
                                } */}
                                {/* <Divider style={{ margin: '16px 0' }} /> */}
                                {/* <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '12px' }}>商家备注</div>
                                {
                                    businessRemark.map((item, index) => {
                                        return (
                                            <DescriptionList key={index} size="small" style={{ marginBottom: 16 }}>
                                                <Description term="备注人">{item.userName}</Description>
                                                <Description term="备注内容">{item.remark}</Description>
                                                <Description term="备注时间"> {item.createTime} </Description>
                                            </DescriptionList>
                                        )
                                    })
                                } */}
                                {/* <Divider style={{ margin: '16px 0' }} /> */}
                                <DescriptionList size="small" style={{ marginBottom: 16 }} title="买家信息">
                                    <Description term="真实姓名">{newDetailInfo.userOrders.realName}</Description>
                                    <Description term="联系电话">{newDetailInfo.userOrders.telephone}</Description>
                                    {newDetailInfo.userOrders.remark && (
                                        <Description term="用户备注">{newDetailInfo.userOrders.remark}</Description>
                                    )}
                                    <Description term="身份证">{newDetailInfo.userOrders.idCard}</Description>
                                    <Description term="平台未完结订单数（包含该订单）">
                                        {newDetailInfo.userOrders.userPayCount}
                                    </Description>
                                    <Description term="平台已完结订单数">
                                        {newDetailInfo.userOrders.userFinishCount}
                                    </Description>
                                    <Description term="信用等级">
                                        {newDetailInfo.creditScore}
                                        <Button
                                            type="primary"
                                            onClick={() =>
                                                this.deliverGoods('reportResult', {
                                                    orderId: userOrders.orderId,
                                                    uid: newDetailInfo.userOrders.uid,
                                                })
                                            }
                                            style={{ marginLeft: 10 }}
                                        >信用详情</Button>
                                    </Description>
                                </DescriptionList>
                                <Divider style={{ margin: '16px 0' }} />
                                {newDetailInfo.orderAddress && (
                                    <DescriptionList size="small" style={{ marginBottom: 16 }} title="收货信息">
                                        <Description term="收货人">{newDetailInfo.orderAddress.realname}</Description>
                                        <Description term="电话">{newDetailInfo.orderAddress.telephone}</Description>
                                        <Description term="地址">
                                            {newDetailInfo.orderAddress.provinceStr +
                                                newDetailInfo.orderAddress.cityStr +
                                                newDetailInfo.orderAddress.areaStr +
                                                newDetailInfo.orderAddress.street}
                                        </Description>
                                    </DescriptionList>
                                )}
                                <Divider style={{ margin: '16px 0' }} />
                                {newDetailInfo.platformExpress && (
                                    <div>
                                        <DescriptionList size="small" style={{ marginBottom: 16 }} title="发货物流信息">
                                            <Description term="快递样式">{newDetailInfo.platformExpress.name}</Description>
                                            <Description term="物流方式">
                                                {expressType(newDetailInfo.userOrders.logisticForm)}
                                            </Description>
                                            <Description term="快递单号">{newDetailInfo.userOrders.expressNo}</Description>
                                            <Description>
                                                <Button
                                                    size="small"
                                                    onClick={() => this.showDrawer('deliver', newDetailInfo.logisticsList)}
                                                >
                                                    查看物流
                        </Button>
                                            </Description>
                                        </DescriptionList>
                                        <Divider style={{ margin: '16px 0' }} />
                                    </div>
                                )}
                                {newDetailInfo.userOrders && newDetailInfo.userOrders.unrentExpressNo && (
                                    <div>
                                        <DescriptionList size="small" style={{ marginBottom: 16 }} title="归还物流信息">
                                            <Description term="快递样式">
                                                {newDetailInfo.giveBackPlatformExpress &&
                                                    newDetailInfo.giveBackPlatformExpress.name}
                                            </Description>
                                            <Description term="物流方式">{expressType(0)}</Description>
                                            <Description term="快递单号">
                                                {newDetailInfo.userOrders.unrentExpressNo}
                                            </Description>
                                            <Description>
                                                <Button
                                                    size="small"
                                                    onClick={() => this.showDrawer('send', newDetailInfo.giveBackLogisticsList)}
                                                >
                                                    查看物流
                        </Button>
                                            </Description>
                                        </DescriptionList>
                                        <Divider style={{ margin: '16px 0' }} />
                                    </div>
                                )}
                                <div className={styles.title}>商品信息</div>
                                <Table
                                    rowKey="rowKey"
                                    style={{ marginBottom: 16 }}
                                    pagination={false}
                                    loading={loading}
                                    dataSource={productData}
                                    columns={productColumns}
                                />
                                <div className={styles.title}>租金信息</div>
                                <Table
                                    rowKey="rowKey"
                                    style={{ marginBottom: 16 }}
                                    pagination={false}
                                    loading={loading}
                                    dataSource={rentInfoData}
                                    columns={rentInfoColumns}
                                />
                                <div className={styles.title}>租期信息</div>
                                <Table
                                    rowKey="rowKey"
                                    style={{ marginBottom: 16 }}
                                    pagination={false}
                                    loading={loading}
                                    dataSource={rentData}
                                    columns={rentColumns}
                                />
                                <div className={styles.title}>押金信息</div>
                                <Table
                                    rowKey="rowKey"
                                    style={{ marginBottom: 16 }}
                                    pagination={false}
                                    loading={loading}
                                    dataSource={depositData}
                                    columns={depositColumns}
                                />
                                {refundOrderList && refundOrderList.length > 0 ? (
                                    <Fragment>
                                        <div className={styles.title} style={{ marginTop: 10 }}>退款订单详情</div>
                                        <Table
                                            style={{ marginTop: 10 }}
                                            columns={refundColumns}
                                            dataSource={refundOrderData}
                                            rowKey={record => record.refundNumber}
                                            pagination={false}
                                        />
                                    </Fragment>
                                ) : null}
                                {periodsData.length > 0 && (
                                    <div>
                                        <div className={styles.title} style={{ marginTop: 10 }}> 分期信息 </div>
                                        <Table
                                            rowKey={record => record.currentPeriods}
                                            style={{ marginBottom: 16 }}
                                            pagination={false}
                                            loading={loading}
                                            dataSource={periodsData}
                                            columns={periodsColumns}
                                        />
                                    </div>
                                )}
                                <div>
                                    <div className={styles.title} style={{ marginTop: 10 }}> 买断订单详情 </div>
                                    <Table
                                        rowKey={record => record.currentPeriods}
                                        style={{ marginBottom: 16 }}
                                        pagination={false}
                                        loading={loading}
                                        dataSource={!!buyOutOrderLists ? buyOutOrderLists : []}
                                        columns={buyoutColums}
                                    />
                                </div>
                                {newDetailInfo.userOrders.status === 'WAITING_SETTLEMENT' && (
                                    <div>
                                        <div className={styles.title}>结算单</div>
                                        <div>
                                            <span style={{ marginRight: '20px' }}>宝贝状态</span>
                                            <Radio.Group onChange={this.onRadioChange} value={radioValue}>
                                                <Radio value="good">完好</Radio>
                                                <Radio value="damage">损坏</Radio>
                                                <Radio value="lose">丢失</Radio>
                                                <Radio value="other">其他</Radio>
                                            </Radio.Group>
                                            {radioValue === 'damage' && (
                                                <div style={{ display: 'inline-block' }}>
                                                    <span style={{ marginLeft: '40px' }}>损坏赔偿金：</span>
                                                    <InputNumber
                                                        min={0}
                                                        defaultValue={0}
                                                        value={damageVal}
                                                        onChange={this.damageValue}
                                                    />
                                                    <span>元</span>
                                                </div>
                                            )}
                                            {radioValue === 'lose' && (
                                                <div style={{ display: 'inline-block' }}>
                                                    <span style={{ marginLeft: '40px' }}>丢失赔偿金：</span>
                                                    <InputNumber
                                                        min={0}
                                                        defaultValue={0}
                                                        value={damageVal}
                                                        onChange={this.damageValue}
                                                    />
                                                    <span>元</span>
                                                </div>
                                            )}
                                        </div>
                                        <div style={{ marginTop: 20 }}>
                                            <Form
                                                {...formItemLayout}
                                                style={{ width: '50%' }}
                                                onSubmit={this.handleSubmit}
                                            >
                                                {radioValue === 'other' && (
                                                    <div>
                                                        <Form.Item label="违约金：">
                                                            {getFieldDecorator('amount', {
                                                                initialValue: newDetailInfo.userViolationRecords[0]
                                                                    ? newDetailInfo.userViolationRecords[0].amount
                                                                    : 0,
                                                            })(<InputNumber min={0} />)}
                                                            <span>元</span>
                                                        </Form.Item>
                                                        <Form.Item label="违约原因：">
                                                            {getFieldDecorator('reason', {
                                                                initialValue: newDetailInfo.userViolationRecords[0]
                                                                    ? newDetailInfo.userViolationRecords[0].reason
                                                                    : '',
                                                            })(<Input style={{ width: '60%' }} placeholder="请输入违约原因" />)}
                                                        </Form.Item>
                                                    </div>
                                                )}
                                                <Form.Item>
                                                    <Button type="primary" htmlType="submit" style={{ marginLeft: '6em' }}>
                                                        确认
                          </Button>
                                                </Form.Item>
                                            </Form>
                                        </div>
                                        <Divider style={{ margin: '16px 0' }} />
                                    </div>
                                )}
                                {(newDetailInfo.userOrders.status === 'WAITING_SETTLEMENT' ||
                                    newDetailInfo.userOrders.status === 'CAN_SEND_DO_SETTLEMENT_AGAIN_FOR_USER' ||
                                    newDetailInfo.userOrders.status === 'WAITING_SETTLEMENT_PAYMENT' ||
                                    newDetailInfo.userOrders.status === 'ORDER_FINISH' ||
                                    newDetailInfo.userOrders.status === 'ORDER_VERDUE') && (
                                        <div>
                                            {
                                                userOrderSettlement && userOrderSettlement ? (
                                                    <Fragment>
                                                        <div className={styles.title}>结算单</div>
                                                        <Table
                                                            rowKey={record => record.id}
                                                            style={{ marginBottom: 16 }}
                                                            pagination={false}
                                                            loading={loading}
                                                            dataSource={violationData}
                                                            columns={violationColumns}
                                                        />
                                                    </Fragment>
                                                ) : null
                                            }
                                        </div>
                                    )}
                                <div>创建时间: {newDetailInfo.userOrders.createTime}</div>
                                {newDetailInfo.userOrders.deliveryTime && (
                                    <div>发货时间: {newDetailInfo.userOrders.deliveryTime}</div>
                                )}
                            </Card>
                        </div>
                    )}
                </Spin>
                <CreateDeliverForm {...parentProps} />
                <Drawer
                    width={420}
                    title={drawerType === 'deliver' ? '发货物流详情' : '归还物流详情'}
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={drawerVisible}
                >
                    <Timeline>
                        {drawerData.map((item, idx) => {
                            let color = 'blue';
                            if (idx === 0) {
                                color = 'green';
                            }
                            return (
                                <Timeline.Item style={{ color: idx !== 0 ? '#aaa' : '#333' }} color={color}>
                                    <p>{item.remark}</p>
                                    <p>{item.datetime}</p>
                                </Timeline.Item>
                            );
                        })}
                    </Timeline>
                </Drawer>
                {/* 商家结算的二次确认 */}
                <Modal
                    title="是否确认结算？"
                    zIndex={2000}
                    visible={this.state.confirmSettlementVisible}
                    onOk={this.confirmSettlement}
                    onCancel={() => this.setState({ confirmSettlementVisible: false })}
                >
                    <Row>
                        <Col>结算类型：{confirmSettlementInfo.listStatus && confirmSettlementInfo.listStatus.length > 0 ? confirmSettlementStatus[confirmSettlementInfo.listStatus[0]] : '无'}</Col>
                        <Col>结算金额：{confirmSettlementInfo.listStatus && confirmSettlementInfo.listStatus.length > 0 ? confirmSettlementInfo.listStatus && confirmSettlementInfo.listStatus[0] == 3 ? confirmSettlementInfo.losePrice : confirmSettlementInfo.listStatus[0] == 4 ? confirmSettlementInfo.userViolationRecords.amount : confirmSettlementInfo.damagePrice : '无'}元</Col>
                        {
                            confirmSettlementInfo.userViolationRecords && <Col>原因：{confirmSettlementInfo.userViolationRecords.reason}</Col>
                        }
                    </Row>
                </Modal>
            </PageHeaderWrapper>
        );
    }
}

export default BasicList;
